<template>
	<div class="add-Man">
		<a-modal title="申请使用通天晓智能物流管理系统" :visible="visible" @cancel="handleCancel" width="600px" :footer="null">
			<a-form :form="form" @submit="handleSubmit">
				<a-form-item label="姓名" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
					<a-input v-decorator="['legalPerson',{rules: [{ required: true, message: '请输入姓名!' }]}]" placeholder='' />
				</a-form-item>
				<a-form-item label="手机号" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
					<a-input v-decorator="['mobile',{rules: [{ required: true, message: '请输入联系人手机号！' },{ validator: checkMobile}]}]" placeholder='' />
				</a-form-item>
				<a-form-item label="验证码" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
					<a-input style="width: 100px;" v-decorator="['code',{rules: [{ required: true, message: '请输入验证码!' }]}]" placeholder='' />
					<img class="img-code" @click="getCodeUrl" :src="codeUrl" />
				</a-form-item>
				<a-form-item label="公司名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
					<a-input v-decorator="['company',{rules: [{ required: true, message: '请输入公司名称!' }]}]" placeholder='' />
				</a-form-item>
				<a-form-item label="选择企业类型" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<a-radio-group v-decorator="['companyType',{rules: [{ required: true, message: '请选择企业类型!' }]}]">
						<a-radio value="1">
							企业单位
						</a-radio>
						<a-radio value="2">
							物流公司
						</a-radio>
						<a-radio value="3">
							配货服务部
						</a-radio>
						<a-radio value="4">
							境外企业
						</a-radio>
						<a-radio value="5">
							个人
						</a-radio>
				    </a-radio-group>
				</a-form-item>
				<a-row class='ant-lable-button'>
					<a-button class='ant-btn-green' html-type="submit">提交</a-button>
					<a-button class='ant-btn-grey' @click="handleCancel">取消</a-button>
				</a-row>
			</a-form>
		</a-modal>
	</div>
</template>
<script>
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	export default {
		data() {
			return {
				visible: false,
				form: this.$form.createForm(this),
				loading: false,
				codeUrl:''
			}
		},
		created() {
			this.getCodeUrl();
		},
		methods: {
			// 校验手机号
			checkMobile:checkTel,
			// 获取验证码
			getCodeUrl () {
				this.codeUrl = 'http://124.207.149.202/api/gifCode?v=' + new Date().getTime() 
//				console.log(this.codeUrl)
			},
			clickCode () {
				this.getCodeUrl();
			},
			// 展示模态框
			showModal(data) {
				console.log(data)
				this.visible = true;
				this.getCodeUrl()
			},
			// 取消按钮
			handleCancel(e) {
				this.visible = false
				this.form.resetFields();
			},
			// 确认提交
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						this.loading = true;
						this.$post('/info/infoOnlineApply', values, true).then((r) => {
							this.$message.success(r.data.message);
							this.handleCancel();
							this.loading = false;
						}).catch((e) => {
							this.loading = false;
						})
					}
				});
			},
		}
	}
</script>
<style lang="less">
	.img-code{
		border: 1px solid #eee;
		width: 100px;
		height: 40px;
		margin-left: 20px;
		margin-top: -2px;
	}
	.img-code:hover{
		cursor:pointer;
	}
</style>